import React, { Component } from "react";
import { Redirect, Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import MyNavLink from "./component/myNavLink";
import "./App.css";

export default class App extends Component {
  render() {
    return (
      <div className="appClass">
        <div className="row">React Router Demo</div>
        <div className="row-nav">
          {/* 在 react中考路由连接实现切换 */}
          {/* <Link className="rowNavB" to="/about">
            About
          </Link>
          <Link className="rowNavB" to="/home">
            Home
          </Link>*/}
          {/* NavLink 可以实现点击高亮效果切换 默认active 需要在css文件里面写好*/}
          {/* <NavLink className="rowNavB" to="/about">
            About
          </NavLink>
          <NavLink className="rowNavB" to="/home">
            Home
        </NavLink>*/}
          {/*自定义封装 */}
          <MyNavLink to="/about">About</MyNavLink>
          <MyNavLink to="/home">Home</MyNavLink>
        </div>
        <div className="container">
          {/*注册路由  exact开启严格匹配*/}
          <Switch>
            <Route path="/about" component={About} />
            <Route path="/home" component={Home} />
            <Redirect to="/about" />
          </Switch>
        </div>
      </div>
    );
  }
}
